<template>
  <div class="main">
    <div class="beiJing" id="top">
      <!-- 导航栏 -->
      <nav-menu></nav-menu>
      <!-- 二楼图片 -->
      <div class="erLou">
        <div class="picture">
          <div class="bac">
            <img
              class="zp"
              :src="url+data[this.$route.params.id - 1].bigImg"
            />

            <p>{{ data[this.$route.params.id - 1].title }}</p>
          </div>

          <div class="zhe">
            <img src="https://www.hzsp.com/images/repeat/bor1.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 优惠活动跳转 -->
      <div class="center">
        <div class="youHui">
          <a href=""><span>戏水广场</span></a>
          <span class="dwkt">11:00</span>
        </div>

        <!-- 绿色标题 -->

        <div class="greenTitle">
          <h3>
            <img src="https://www.hzsp.com/itemlist/images/zhua.png" alt="" />{{
              data[this.$route.params.id - 1].title
            }}
          </h3>
        </div>

        <div class="mainCard">
          <div class="card">
            <div class="ig">
              <img :src="url+data[this.$route.params.id - 1].src" alt="" />
            </div>
            <div class="text">
              <p>{{ data[this.$route.params.id - 1].title }}</p>
              <span>{{ data[this.$route.params.id - 1].text }}</span>
            </div>
          </div>
        </div>

        <div class="greenTitle">
          <h3>
            <img src="https://www.hzsp.com/itemlist/images/zhua.png" alt="" />
            更多有趣的游玩演艺
          </h3>
        </div>

        <div class="baoy">
          <a href="#top">
          <div class="xyuan" v-for="v in data" :key="v.pid" @click="change(v.pid)">
            <div class="yuan" >
              <img
                :src="url+v.src"
                alt=""
              />
            </div>
            <p>{{v.title}}</p>
          </div>
          </a>
        </div>
      </div>

      <div class="footZhe">
        <img src="https://www.hzsp.com/images/repeat/bor2.png" alt="" />
      </div>

      <!-- 绿色购票卡片 -->
      <Food></Food>
      <!-- 底部 -->
      <Bot></Bot>
    </div>
  </div>
</template>

<script>
import NavMenu from "@/components/NavMenu.vue";
import Bot from "@/components/index/Bot.vue";
import Food from "@/components/index/Food.vue";
import Card from "@/components/index/Card.vue";
export default {
  components: { NavMenu, Bot, Food, Card },
  data() {
    return {
      data: {},
      url:'http://176.19.26.136:3000/'
    };
  },
  methods: {
    change(pid) {
      this.$router.push(`/showDetails/${pid}`)
    }
  },
  mounted() {
    this.axios.get("/v1/content/playQuery").then((res) => {
      console.log(res);
      this.data = res.data.data;
    });
  },
};
</script>
<style lang="scss" scoped>
.baoy {

  overflow: hidden;
  a{
    .xyuan {
    &:hover{
      // color: #2b4c1d;
      img{
        transform: scale(1.1);
      }
      p{
        color: #be7a31;
      }
    }
    float: left;
    margin-top: 20px;
    overflow: hidden;
    width: 337px;
    height: 301px;
    text-align: center;
    p {
      display: block;

      color: #505050;
      font-size: 24px;
      margin-top: 10px;
      margin-bottom: 10px;
      font-family: inherit;
      font-weight: 500;
      line-height: 1.1;
    }
    .yuan {
      width: 250px;
      height: 250px;
      overflow: hidden;
      border-radius: 50%;
      margin: 0 auto;
      // text-align: center;
      img {
        display: block;
        width: 100%;
        height: 100%;
        transition: 0.5s;
       
      }
    }
  }
  }
  
}

.main {
  overflow-x: hidden;
}

* {
  font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑,
    STHeiti, MingLiu;
}
p,
span {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

.card {
  height: 455px;
  overflow: hidden;
  margin-top: 30px;
  .ig {
    width: 720px;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    float: left;
    img {
      width: 100%;
    }
  }
  .text {
    width: 720px;
    box-sizing: border-box;
    background-color: #fff;
    height: 455px;
    padding: 40px;
    float: left;
    border-radius: 0 20px 20px 0;
    p {
      font-size: 36px;
      color: #585858;
      margin-top: 40px;
      font-family: inherit;
      font-weight: 500;
      line-height: 1.1;
    }
    span {
      font-size: 14px;
      color: #585858;
      line-height: 28px;
      margin-top: 20px;
    }
  }
  p {
    color: #353535;
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 20px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
  }
  i {
    height: 2px;
    width: 55px;
    display: block;
    background: #356a0b;
    font-style: normal;
  }
}

.center {
  width: 1500px;
  margin: 0 auto;
  position: relative;
  top: -100px;
}

.beiJing {
  background: url(https://www.hzsp.com/images/repeat/wen1.jpg);

  .erLou {
    .picture {
      .bac {
        position: relative;

        p {
          position: absolute;
          top: 650px;
          left: 150px;
          color: white;
          font-size: 56px !important;
          font-family: inherit;
          font-weight: 500;
          line-height: 1.1;
        }
      }
      .zp {
        background-size: cover;
        width: 100%;
      }

      .zhe {
        img {
          transform: translate(0, -23px);
        }
      }
    }
  }

  .youHui {
    position: relative;
    bottom: 50px;
    left: 20px;
    a {
      text-decoration: none;
      span {
        margin: 20px;
        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑,
          STHeiti, MingLiu;
        color: #585858;

        margin-left: 4px;
        font-size: 20px;
      }
    }
    span {
      margin: 20px;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑,
        STHeiti, MingLiu;
      color: #585858;

      margin-left: 4px;
      font-size: 20px;
    }

    .jt {
      position: relative;
      top: 8px;
    }
    .dwkt {
      position: relative;
      left: -15px;
    }
  }

  a {
    margin: 0 auto;
  }
}

.greenTitle {
  h3 {
    color: #2b4c1d;
    display: flex;
    justify-content: center;
    font-size: 42px;
    margin: 20px 0 10px;
  }
}

.footZhe {
  img {
    background-size: cover;
    width: 100%;
    transform: translate(0, 25px);
  }
}
</style>
